import UIManager from "../UIManager";
import Util from "../utils/Util";
import UIBase from "./UIBase";

const { ccclass, property } = cc._decorator;

@ccclass
export default class ControlPanel extends UIBase {

    @property(cc.Node)
    clickDownButton: cc.Node = null
    @property(cc.Node)
    clickLeftButton: cc.Node = null
    @property(cc.Node)
    clickRigthButton: cc.Node = null
    @property(cc.Node)
    panelBkNode: cc.Node = null
    @property(cc.Node)
    panelMidNode: cc.Node = null

    private _uiManager: UIManager = null
    private _leftOpen: boolean = false
    private _rightOpen: boolean = false

    onLoad() {
        super.onLoad()
    }

    update(dt: number) {
        // 左移
        if (this._leftOpen && this._uiManager) {
            this._uiManager.onClickLeftFood(dt)
        }

        // 右移
        if (this._rightOpen && this._uiManager) {
            this._uiManager.onClickRightFood(dt)
        }
    }

    public init(uiManager: UIManager): void {
        this._uiManager = uiManager
        const { TOUCH_START, TOUCH_MOVE, TOUCH_END, TOUCH_CANCEL } = cc.Node.EventType
        // 按钮事件
        // 轮盘拖动控制
        this.panelBkNode.on(TOUCH_START, (event: cc.Event.EventTouch) => {
            // 触摸事件的坐标转为局部坐标
            const pos: cc.Vec2 = this.panelBkNode.convertToNodeSpaceAR(event.getLocation())
            this.panelMidNode.setPosition(this._limitMidNodePos(pos))
            // 获取pos点与原点(0,0)之间直线的倾斜角（单位：弧度），并将弧度转为角度
            const angle = cc.misc.radiansToDegrees(Math.atan2(pos.y, pos.x))
            // 传出角度
            this._uiManager.onRotateFood(angle)
        })

        // 限制轮盘不能被移动到外面
        this.panelBkNode.on(TOUCH_MOVE, (event: cc.Event.EventTouch) => {
            // 触摸事件的坐标转为局部坐标
            const pos: cc.Vec2 = this.panelBkNode.convertToNodeSpaceAR(event.getLocation())
            this.panelMidNode.setPosition(this._limitMidNodePos(pos))
            // 弧度转角度
            const angle = cc.misc.radiansToDegrees(Math.atan2(pos.y, pos.x))
            // 传出角度
            this._uiManager.onRotateFood(angle)
        })

        // 轮盘松手回归
        this.panelBkNode.on(TOUCH_END, () => {
            this.panelMidNode.setPosition(0, 0)
        })
        this.panelBkNode.on(TOUCH_CANCEL, () => {
            this.panelMidNode.setPosition(0, 0)
        })

        // 向左按钮
        this.clickLeftButton.on(TOUCH_START, () => {
            Util.clickDownTween(this.clickLeftButton)
            this._leftOpen = true
        })
        this.clickLeftButton.on(TOUCH_END, () => {
            Util.clickUpTween(this.clickLeftButton)
            this._leftOpen = false
        })
        this.clickLeftButton.on(TOUCH_CANCEL, () => {
            Util.clickUpTween(this.clickLeftButton)
            this._leftOpen = false
        })

        // 向右按钮
        this.clickRigthButton.on(TOUCH_START, () => {
            Util.clickDownTween(this.clickRigthButton)
            this._rightOpen = true
        })
        this.clickRigthButton.on(TOUCH_END, () => {
            Util.clickUpTween(this.clickRigthButton)
            this._rightOpen = false
        })
        this.clickRigthButton.on(TOUCH_CANCEL, () => {
            Util.clickUpTween(this.clickRigthButton)
            this._rightOpen = false
        })

        // 放下按钮
        this.clickDownButton.on(TOUCH_START, () => {
            Util.clickDownTween(this.clickDownButton)
        })
        this.clickDownButton.on(TOUCH_END, () => {
            Util.clickUpTween(this.clickDownButton)
            this._uiManager.onClickDownFood()
        })
        this.clickDownButton.on(TOUCH_CANCEL, () => {
            Util.clickUpTween(this.clickDownButton)
        })
    }

    /**
     * 坐标限位，放传入的坐标将坐标限制到某个区间中
     * @param pos 
     */
    private _limitMidNodePos(pos: cc.Vec2): cc.Vec2 {
        const R = 130           // 限制的半径
        const len = pos.mag()   // 向量长度
        const ratio = len > R ? (R / len) : 1   // R和pos的比例（越界后的比例），使得x和y限制在R半径内
        return cc.v2(pos.x * ratio, pos.y * ratio)
    }
}
